<template>
  <BasicModal
    :canFullscreen="false"
    @cancel="handleCancel"
    v-bind="$attrs"
    @register="registerModal"
    title="选择步骤"
  >
    <div class="container">
      <CheckboxGroup v-model:value="checkValues" name="checkboxgroup" :options="steps" />
    </div>
    <template #footer>
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup name="ButtonsModal">
  import { Checkbox } from 'ant-design-vue';
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { isString } from '/@/utils/is';

  import modelerStore from '/@/store/modules/bpmnModeler';
  const CheckboxGroup = Checkbox.Group;

  const emit = defineEmits(['submit', 'register']);
  const { createMessage } = useMessage();
  const modeler = modelerStore();
  const steps = ref([]);

  const checkValues = ref<string[]>([]);
  const [registerModal, { closeModal }] = useModalInner(async (data) => {
    if (data && isString(data)) {
      checkValues.value = data.split(';');
    }

    //传进来的参数
    steps.value = modeler.getActivities.map((i) => i.activityName);
  });

  async function handleSubmit() {
    const params = [...checkValues.value];

    createMessage.success('操作成功');
    emit('submit', params);
    handleCancel();
  }
  function handleCancel() {
    checkValues.value = [];
    closeModal();
  }
</script>
<style lang="less" scoped>
  .container {
    padding: 0 20px;
    display: flex;
  }
</style>
